<template>
	<el-row>
		<el-col :span="6">
			<el-card class="box-card" v-loading="loading">
				<view slot="header" class="header">
					<text class="header-title">未付款订单数量</text>
					<el-tag size="small"> 未付款 </el-tag>
				</view>
				<view class="box-card-body num-view">
					<text>{{ data.list[0] }}</text>
					<text class="unit">单</text>
				</view>
			</el-card>
		</el-col>
		<el-col :span="6">
			<el-card class="box-card" v-loading="loading">
				<view slot="header" class="header">
					<text class="header-title">未发货订单数量</text>
					<el-tag size="small"> 未发货 </el-tag>
				</view>
				<view class="box-card-body num-view">
					<text>{{ data.list[1] + data.list[2] }}</text>
					<text class="unit">单</text>
				</view>
			</el-card>
		</el-col>
		<el-col :span="6">
			<el-card class="box-card" v-loading="loading">
				<view slot="header" class="header">
					<text class="header-title">未发完订单数量</text>
					<el-tag size="small"> 未发完 </el-tag>
				</view>
				<view class="box-card-body num-view">
					<text>{{ data.list[3] }}</text>
					<text class="unit">单</text>
				</view>
			</el-card>
		</el-col>
		<el-col :span="6">
			<el-card class="box-card" v-loading="loading">
				<view slot="header" class="header">
					<text class="header-title">申请退款中订单数量</text>
					<el-tag size="small"> 退款中 </el-tag>
				</view>
				<view class="box-card-body num-view">
					<text>{{ data.list[4] }}</text>
					<text class="unit">单</text>
				</view>
			</el-card>
		</el-col>
	</el-row>
</template>

<script>
export default {
	name: "getOrderStatusGroup",
	props: {

	},
	data() {
		return {
			data:{
				list:[],
			},
			loading:false,
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.getList();
		},
		getList(){
			let that = this;
			vk.callFunction({
				url: 'admin/business/kh/stats.getOrderStatusGroup',
				loading: { that, name:"loading" },
				data: {},
				success: (data) => {
					that.data.list = data.list;
				}
			});
		}
	},
	watch: {

	},
	computed: {

	}
};
</script>
<style lang="scss" scoped>
@import "@/pages/stats/common/css/index.scss";
</style>
